<template>
	<!-- 会员中心 -->
	<view class="page">
		<view class="head">
			<c-navBar title="会员中心" isTran type='1' color="#FFFFFF"></c-navBar>
			<image class="member_bg" src="/pages/my/static/member_bg.png" />
			<view class="info">
				<view class="info_l">
					<image class="header-img" v-if="detail.avatar"
						:src="detail.avatar?vuex_imgUrl+detail.avatar:'/static/common/header-img.png'" />
					<image v-else class="header-img" src="/static/common/header-img.png" />
					<view class="user">
						<view class="title">{{detail.nickname}}</view>
						<view class="open">{{detail.vip?'到期时间：'+$fn.parseTime(detail.vipExpireTime,'{y}-{m}-{d}'):'暂未开通会员'}}</view>
					</view>
				</view>
				<view class="record" @click="$fn.jumpPage('/pages/my/pages/purchaseRecord')">购买记录</view>
			</view>
		</view>

		<view class="main">
			<view class="card">
				<view class="card_item" :class="{card_item_a:selectCard==v.id}"
					v-for="(v,i) in detail.membershipCardList" :key="i" @click="selectCard=v.id">
					<view class="price">
						<text class="symbol">￥</text>
						{{v.price}}
					</view>
					<view class="day_price">每天仅￥{{(v.price/30).toFixed(2)}}</view>
					<view class="card_name">{{v.title}}</view>
				</view>
			</view>

			<view class="agreement-box">
				<view class="ag-box" @click="tabAgree">
					<image v-if="isAgree" src="/static/common/select2.png" mode=""></image>
					<image v-else src="/static/common/noSelect.png" mode=""></image>
				</view>
				<view class="agreement">
					<text @click.stop="tabAgree">我已阅读并同意</text>
					<text class="primary-color" @click.stop="jumpXy(3)">《会员协议》</text>
				</view>
			</view>

			<view class="submit" @click="buyCard">
				{{detail.vip?"续费":"立即开通"}}
			</view>

			<view class="equity">
				<view class="equity_top">
					<image class="equity_line" src="/pages/my/static/equity_line.png" mode=""></image>
					<view class="equity_title">会员权益</view>
				</view>

				<view class="content">
					<!-- <view class="content_item" v-for="(v,i) in content" :key="i">{{v}}</view> -->
					<u-parse :content="detail.memberBenefit"></u-parse>
				</view>
			</view>
		</view>
		<view style="height: 40rpx;"></view>

		<!-- 风险提示函 -->
		<u-popup :show="show" :round="10" closeable @close="goBack">
			<view class="pop_title">
				风险提示函
			</view>
			<view class="pop_content"><u-parse :content="detail.riskWarnning"></u-parse></view>

			<view class="pop_confirm" @click="show=false">确认</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		name: "memberCenter",
		data() {
			return {
				detail: {},
				cardList: [{
					id: 1,
					name: '月卡',
					price: 36,
					dayPrice: 1.2
				}, {
					id: 2,
					name: '季卡',
					price: 89,
					dayPrice: 0.98
				}, {
					id: 3,
					name: '半年卡',
					price: 168,
					dayPrice: 0.93
				}, {
					id: 4,
					name: '年卡',
					price: 319,
					dayPrice: 0.87
				}],
				selectCard: '',
				isAgree: false, //是否同意协议
				content: [],
				show: false
			};
		},
		onLoad() {
			this.getMemberCenterFn()
		},
		onShow() {},
		methods: {
			// 关闭风险提示退回上一级
			goBack(){
				this.show=false
				uni.navigateBack()
			},
			
			// 获取会员卡详情
			getMemberCenterFn() {
				this.$api.getMemberCenter().then(res => {
					console.log('会员中心数据', res);
					this.detail = res.data
					this.selectCard = res.data.membershipCardList[0].id
					this.show = true
				})
			},
			// 购买会员
			buyCard() {
				if (!this.isAgree) {
					return uni.showToast({
						icon: 'none',
						title: '请先同意会员协议',
					})
				}

				this.$api.buyCard({
					cardId: this.selectCard
				}).then(res => {
					console.log('支付数据', res);
					this.wechatPayment(res.data)
				})
			},
			// 微信支付
			wechatPayment(data) {
				uni.requestPayment({
					provider: 'wxpay',
					timeStamp: data.timeStamp,
					nonceStr: data.nonceStr,
					package: data.package,
					signType: data.signType,
					paySign: data.paySign,
					success: (res) => {
						console.log('success:' + JSON.stringify(res));
						uni.showToast({
							icon: 'success',
							title: '支付成功'
						})
						this.getMemberCenterFn()
					},
					fail: function(err) {
						console.log('fail:' + JSON.stringify(err));
						uni.showToast({
							icon: 'error',
							title: '网络开小差了~'
						})
					}
				});
			},

			// 同意/不同意协议
			tabAgree() {
				this.isAgree = !this.isAgree;
			},
			// 跳转协议
			jumpXy(e) {
				uni.navigateTo({
					url: '/pages/tabbar/agreement?type=' + e
				})
			},
		}
	};
</script>

<style lang="scss" scoped>
	.head {
		height: 416rpx;
		width: 750rpx;
		position: relative;

		.member_bg {
			width: 100%;
			height: 100%;
			position: absolute;
			z-index: -1;
		}

		.info {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 0 0 32rpx;
			box-sizing: border-box;
			padding-top: 220rpx;

			.info_l {
				display: flex;
				align-items: center;
				gap: 24rpx;

				.header-img {
					width: 120rpx;
					height: 120rpx;
					border-radius: 50%;
				}

				.user {
					height: 100rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.title {
						font-weight: bold;
						font-size: 36rpx;
						color: #F3DFC5;
					}

					.open {
						font-weight: 400;
						font-size: 24rpx;
						color: #C8BFAD;
					}
				}
			}

			.record {
				width: 120rpx;
				height: 52rpx;
				background: linear-gradient(90deg, #8E6D43 0%, rgba(142, 109, 67, 0.4) 100%);
				border-radius: 30rpx 0rpx 0rpx 30rpx;

				font-size: 20rpx;
				color: #F3DFC5;
				line-height: 52rpx;
				text-align: center;
			}

		}
	}

	.main {
		width: 750rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 0rpx 0rpx;
		margin-top: -24rpx;
		position: relative;

		.card {
			padding: 48rpx 24rpx 0rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			gap: 20rpx;

			.card_item {
				width: 160rpx;
				height: 200rpx;
				background: #FAFAFA;
				border-radius: 12rpx 40rpx 12rpx 12rpx;
				border: 2rpx solid #E7E7E7;
				position: relative;

				.price {
					width: 100%;
					text-align: center;
					font-size: 48rpx;
					color: #666666;
					margin: 64rpx 0 20rpx;

					.symbol {
						font-size: 28rpx;
					}
				}

				.day_price {
					text-align: center;
					font-size: 20rpx;
					color: #999593;
				}

				.card_name {
					width: 96rpx;
					height: 40rpx;
					background: linear-gradient(270deg, #E2E2E2 0%, #CCCCCC 100%);
					border-radius: 16rpx 0rpx 16rpx 0rpx;
					font-size: 24rpx;
					color: #666666;
					line-height: 40rpx;
					text-align: center;
					position: absolute;
					top: -15rpx;
					left: 0;
				}
			}

			.card_item_a {
				background: #FBF0E1;
				border: 2rpx solid #E9B56D;

				.price {
					color: #744D14;

					.symbol {}
				}

				.day_price {
					color: #665F5C;
				}

				.card_name {
					background: linear-gradient(270deg, #FFDCA8 0%, #F0BA6E 100%);
					color: #7A4C0C;
				}
			}

		}


		.agreement-box {
			display: flex;
			align-items: center;
			width: 100%;
			padding: 32rpx 24rpx 48rpx;
			box-sizing: border-box;

			.ag-box {
				width: 50rpx;
				height: 50rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			image {
				width: 24rpx;
				height: 24rpx;
			}

			.agreement {
				font-size: 28rpx;
				font-weight: 500;
				color: #666666;

				.primary-color {
					color: #3F3426;
				}
			}
		}

		.submit {
			width: 686rpx;
			height: 96rpx;
			background: linear-gradient(242deg, #262523 0%, #534D47 100%);
			border-radius: 48rpx;
			font-weight: bold;
			font-size: 36rpx;
			color: #FFFFFF;
			line-height: 96rpx;
			text-align: center;
			margin: 0 auto;
		}

		.equity {
			width: 702rpx;
			border-radius: 16rpx;
			border: 2rpx solid #E7E7E7;
			margin: 64rpx auto 0;

			.equity_top {
				position: relative;
				display: flex;
				justify-content: center;
				align-items: center;
				height: 100rpx;

				.equity_line {
					width: 432rpx;
					height: 8rpx;
				}

				.equity_title {
					font-weight: bold;
					font-size: 36rpx;
					color: #3F3426;
					text-align: center;
					position: absolute;
				}
			}

			.content {
				padding: 0 28rpx 30rpx;
				box-sizing: border-box;

				.content_item {
					font-weight: 400;
					font-size: 28rpx;
					color: #3F3426;
					margin-bottom: 20rpx;
				}
			}
		}
	}

	.pop_title {
		font-weight: bold;
		font-size: 36rpx;
		color: #1A1A1A;
		text-align: center;
		margin: 40rpx 0;
	}

	.pop_content {
		padding: 0 32rpx;
		box-sizing: border-box;
		font-weight: 400;
		font-size: 28rpx;
		color: #666666;
		line-height: 50rpx;
	}

	.pop_confirm {
		width: 686rpx;
		height: 96rpx;
		background: linear-gradient(141deg, #F0A367 0%, #EF4630 100%);
		border-radius: 48rpx;
		font-weight: bold;
		font-size: 36rpx;
		color: #FFFFFF;
		line-height: 96rpx;
		text-align: center;
		margin: 36rpx auto 0;
	}
</style>